<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>权限管理</title>
	<link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">权限名称</label>
						<div class="layui-input-inline">
							<input type="text" name="title" placeholder="" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">权限类型</label>
						<div class="layui-input-inline">
							<select name="type" lay-filter="type">
								<option value=""></option>
								<option value="0">根节点</option>
								<option value="1">叶子节点</option>
								<option value="-1">非节点</option>
								<option value="-2">开发中</option>
							  </select>
						</div>
					</div>

					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="village-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="village_table" lay-filter="village_table"></table>
		</div>
	</div>

	<script type="text/html" id="role-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
		</script>

	<script type="text/html" id="role-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

	<script type="text/html" id="goods-enable">

			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="goods-enable" {{ d.status == 1 ? 'checked' : '' }}>
		</script>

	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>

	<!-- 状态显示 -->
	<script type="text/html" id="type">
			{{#  if(d.type == 0){ }}
			<button class="layui-btn layui-btn-danger layui-btn-xs">根节点</button>
			{{#  } else if(d.type == 1) { }}
			<button class="layui-btn layui-btn-xs">叶子节点</button>
			{{#  } else if(d.type == -1) { }}
			<button class="layui-btn layui-btn-primary layui-btn-xs">非节点</button>
			{{#  } else if(d.type == -2) { }}
			<button class="layui-btn">开发中</button>
			{{#  } }}
		</script>
		<script type="text/html" id="zizeng">
			{{d.LAY_TABLE_INDEX+1}}
		</script>

	<script>
		layui.use(['table', 'form', 'jquery'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			//注意这里的路径，是add按钮和edit按钮的路径
			let MODULE_PATH = "menu/";

			let cols = [
				[
					{ type: 'checkbox' },
					{ title: 'id', field: 'id', align: 'center', width: 50 , hide: true},
					{ title: '序号', field: 'id', align: 'center', width: 100 ,templet: '#zizeng' },
					{ title: '权限名称', field: 'title', align: 'center' },
					{ title: '权限类型', field: 'type', align: 'center' ,templet: '#type'},
					{ title: 'href', field: 'href', align: 'center' },
					{ title: 'Perm', field: 'perm', align: 'center' },
					{ title: '操作', toolbar: '#role-bar', align: 'center', width: 195 }
				]
			]

			table.render({
				elem: '#village_table',
				url: 'http://localhost:8080/menu/query',
				page: true,
				cols: cols,
				skin: 'line',
				toolbar: '#role-toolbar',
				headers: {
					token: localStorage.getItem("token")
				},
				defaultToolbar: [{
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});

			table.on('tool(village_table)', function (obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'power') {
					window.power(obj);
				}
			});

			table.on('toolbar(village_table)', function (obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				} else if (obj.event === 'batchRemove') {
					window.batchRemove(obj);
				}
			});

			
			form.on('submit(village-query)', function (data) {
				$.ajax({
					url: 'http://localhost:8080/menu/query',
					method: 'get',
					data: data.field,
					success: function (response) {
						table.reload('village_table', { where: data.field })
					},
					
				});
				return false;
			});

			form.on('switch(goods-enable)', function (obj) {
				var checked = obj.elem.checked;
				let status = 2;

				if (checked == true) {
					status = 1;
				}

				$.ajax({
					url: 'http://www.j236.com/admin/goods/updateStatus',
					data: {
						"goodsId": this.value,
						"status": status
					},
					type: 'post',
					success: function (result) {
						layer.alert("操作成功!");
						form.render();
					}
				})

			});

			window.add = function () {
				layer.open({
					type: 2,
					title: '新增',
					shade: 0.1,
					maxmin: true,
					area: ['800px', '500px'],
					content: MODULE_PATH + 'add.html'
				});
			}

			window.edit = function (obj) {
				layer.open({
					type: 2,
					title: '修改',
					shade: 0.1,
					area: ['800px', '500px'],
					content: MODULE_PATH + 'edit.html?id=' + obj.data.id
				});
			}

			window.remove = function (obj) {
				layer.confirm('确定要删除该权限', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					let loading = layer.load();

					$.ajax({
						url: 'http://localhost:8080/menu/delete',
						data: {
							"id": obj.data['id']
						},
						type: 'post',
						headers: {
							token: localStorage.getItem("token")
						},
						success: function (result) {
							layer.close(loading);
							if (result.code == 0) {
								layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
									obj.del();//前端的假删除
								});
							} else {
								layer.msg(result.msg, { icon: 2, time: 1000 });
							}
						}
					})

				});
			}

			window.batchRemove = function (obj) {
				let data = table.checkStatus(obj.config.id).data;
				if (data.length === 0) {
					layer.msg("未选中数据", { icon: 3, time: 1000 });
					return false;
				}
				let ids = "";
				for (let i = 0; i < data.length; i++) {
					ids += data[i].id + ",";
				}

				//去除最后一个逗号
				ids = ids.substr(0, ids.length - 1);

				console.info(ids)

				layer.confirm('确定要删除这些小区', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: "http://localhost:8080/community/village/deleteByIds",
						data: {
							"ids": ids
						},
						type: 'POST',
						success: function (result) {
							layer.close(loading);
							if (result.code == 0) {
								layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
									table.reload('village_table');
								});
							} else {
								layer.msg(result.msg, { icon: 2, time: 1000 });
							}
						}
					})
				});
			}

			window.refresh = function () {
				table.reload('village_table');
			}
		})
	</script>
</body>

</html>